<% title "O RLY Parody Book Generator" %>
<%= stylesheet_link_tag 'application', media: 'all' %>
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<%= javascript_include_tag 'application' %>

<%= content_for :page_meta do %>
<link rel="canonical" href="https://dev.to/rly"/>
<meta name="description" content="Insult your co-workers with snarky O RLY parody book covers!">
<meta name="keywords" content="software development,engineering,rails,javascript,ruby">

<meta property="og:type" content="website" />
<meta property="og:url" content="https://dev.to/rly" />
<meta property="og:title" content="O RLY Parody Book Cover Generator" />
<meta property="og:image" content="http://i.imgur.com/pAORVha.png" />
<meta property="og:description" content="Insult your co-workers with snarky O RLY parody book covers!" />
<meta property="og:site_name" content="The Practical Dev" />

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@ThePracticalDev">
<meta name="twitter:title" content="O RLY Parody Book Cover Generator">
<meta name="twitter:description" content="Insult your co-workers with snarky O RLY parody book covers!">
<meta name="twitter:image:src" content="http://i.imgur.com/pAORVha.png">
<% end %>

<div class="rlyweb-container">
  <div class="hero">
    <h1>O RLY Cover Generator</h1>
    <div class="gen-form">
      <form>
        <label>Title</label>
        <input id="title" name="title" placeholder="required"/>
        <label>Top Text</label>
        <input id="top_text" name="top_text" placeholder="required"/>
        <label>Author</label>
        <input id="author" name="author" placeholder="required"/>
        <label>Animal Code</label>
        <input id="image_code" name="image_code" placeholder="1-40 (listed below, defaults to random)"/>
        <label>Color Code</label>
        <input id="theme" name="theme" placeholder="0-16 (listed below, defaults to random)"/>
        <label>Guide Text</label>
        <input id="guide_text" name="guide_text" placeholder="such as 'The Definitive Guide'"/>
        <label>Guide Text Placement</label>
        <select id="guide_text_placement" name="guide_text_placement">
          <option selected value="bottom_right">Bottom Right</option>
          <option value="bottom_left">Bottom Left</option>
          <option value="top_right">Top Right</option>
          <option value="top_left">Top Left</option>
        </select>
        <button>Generate O RLY</button>
      </form>
    </div>
    <div class="result">
      <img src="<%= cloudinary('http://i.imgur.com/wsGjkE9.png',300) %>" alt="O RLY? Book Example" />
      <a href="#" style="visibility:hidden">Download</a>
    </div>
  </div>
  <h4>Insult your co-workers with snarky O RLY parody book covers!</h4>
  <h4 class="ps">PS. There are a few known edge cases that do not generate. Some characters and long words won't work, etc. If you want to report an issue, feel free DM <a href="http://twitter.com/thepracticaldev">@ThePracticalDev</a> on Twitter.</h4>
  <hr/>
  <div class="usage">
    <h3>Animal Codes</h3>
    <p><i>The animal images are from the <a href="https://etc.usf.edu/clipart/" target="_blank" rel="noopener">USF ClipArt ETC</a> project.  They are used in this O RLY Cover Generator for the purposes of parody.</i></p>
    <div class="animal"><%= image_tag "1.png" %>1</div>
    <div class="animal"><%= image_tag "2.png" %>2</div>
    <div class="animal"><%= image_tag "3.png" %>3</div>
    <div class="animal"><%= image_tag "4.png" %>4</div>
    <div class="animal"><%= image_tag "5.png" %>5</div>
    <div class="animal"><%= image_tag "6.png" %>6</div>
    <div class="animal"><%= image_tag "7.png" %>7</div>
    <div class="animal"><%= image_tag "8.png" %>8</div>
    <div class="animal"><%= image_tag "9.png" %>9</div>
    <div class="animal"><%= image_tag "10.png" %>10</div>
    <div class="animal"><%= image_tag "11.png" %>11</div>
    <div class="animal"><%= image_tag "12.png" %>12</div>
    <div class="animal"><%= image_tag "13.png" %>13</div>
    <div class="animal"><%= image_tag "14.png" %>14</div>
    <div class="animal"><%= image_tag "15.png" %>15</div>
    <div class="animal"><%= image_tag "16.png" %>16</div>
    <div class="animal"><%= image_tag "17.png" %>17</div>
    <div class="animal"><%= image_tag "18.png" %>18</div>
    <div class="animal"><%= image_tag "19.png" %>19</div>
    <div class="animal"><%= image_tag "20.png" %>20</div>
    <div class="animal"><%= image_tag "21.png" %>21</div>
    <div class="animal"><%= image_tag "22.png" %>22</div>
    <div class="animal"><%= image_tag "23.png" %>23</div>
    <div class="animal"><%= image_tag "24.png" %>24</div>
    <div class="animal"><%= image_tag "25.png" %>25</div>
    <div class="animal"><%= image_tag "26.png" %>26</div>
    <div class="animal"><%= image_tag "27.png" %>27</div>
    <div class="animal"><%= image_tag "28.png" %>28</div>
    <div class="animal"><%= image_tag "29.png" %>29</div>
    <div class="animal"><%= image_tag "30.png" %>30</div>
    <div class="animal"><%= image_tag "31.png" %>31</div>
    <div class="animal"><%= image_tag "32.png" %>32</div>
    <div class="animal"><%= image_tag "33.png" %>33</div>
    <div class="animal"><%= image_tag "34.png" %>34</div>
    <div class="animal"><%= image_tag "35.png" %>35</div>
    <div class="animal"><%= image_tag "36.png" %>36</div>
    <div class="animal"><%= image_tag "37.png" %>37</div>
    <div class="animal"><%= image_tag "38.png" %>38</div>
    <div class="animal"><%= image_tag "39.png" %>39</div>
    <div class="animal"><%= image_tag "40.png" %>40</div>

    <h3>Color Codes</h3>
    <div class="color" style="background-color:rgba(85,19,93,255)">0</div>
    <div class="color" style="background-color:rgba(113,112,110,255)">1</div>
    <div class="color" style="background-color:rgba(128,27,42,255)">2</div>
    <div class="color" style="background-color:rgba(184,7,33,255)">3</div>
    <div class="color" style="background-color:rgba(101,22,28,255)">4</div>
    <div class="color" style="background-color:rgba(80,61,189,255)">5</div>
    <div class="color" style="background-color:rgba(225,17,5,255)">6</div>
    <div class="color" style="background-color:rgba(6,123,176,255)">7</div>
    <div class="color" style="background-color:rgba(247,181,0,255)">8</div>
    <div class="color" style="background-color:rgba(0,15,118,255)">9</div>
    <div class="color" style="background-color:rgba(168,0,155,255)">10</div>
    <div class="color" style="background-color:rgba(0,132,69,255)">11</div>
    <div class="color" style="background-color:rgba(0,153,157,255)">12</div>
    <div class="color" style="background-color:rgba(1,66,132,255)">13</div>
    <div class="color" style="background-color:rgba(177,0,52,255)">14</div>
    <div class="color" style="background-color:rgba(55,142,25,255)">15</div>
    <div class="color" style="background-color:rgba(133,152,0,255)">16</div>
  </div>
  <div class="thanks">
    <h3>But don't thank <a target="_blank" href="http://twitter.com/ThePracticalDev">@ThePracticalDev</a> for this one</h3>
    <h4>This tool was created with love by Charles Berlin (<a target="_blank" href="http://twitter.com/AModelEngineer">@AModelEngineer</a>)
  </div>
</div>
<script>
  $("form").submit(function(e){
    e.preventDefault();
    var title = encodeURIComponent($("#title").val());
    var topText = encodeURIComponent($("#top_text").val());
    var author = encodeURIComponent($("#author").val());
    var imageCode = encodeURIComponent($("#image_code").val());
    var theme = encodeURIComponent($("#theme").val());
    var theme = encodeURIComponent($("#theme").val());
    var guide_text = encodeURIComponent($("#guide_text").val());
    var guide_text_placement = encodeURIComponent($("#guide_text_placement").val());

    if(isNaN(imageCode) || imageCode.length == 0){
      imageCode = Math.floor(Math.random() * 38) + 1;
    }
    if(isNaN(theme) || theme.length == 0){
      theme = Math.floor(Math.random() * 16);
    }
    if(title.length > 0 && topText.length > 0 && author.length > 0){
      var imagePath = 'https://orly-appstore.herokuapp.com/generate?title='+title+'&top_text='+topText+'&author='+author+'&image_code='+imageCode+'&theme='+theme+'&guide_text='+guide_text+'&guide_text_placement='+guide_text_placement;
      $(".result").html('<img src="'+imagePath+'" alt='+title+'"/>')
      $(".result").append('<a href="'+imagePath+'" download="'+imagePath+'">Download</a>');
      if($(window).width()< 820){
        $("html,body").animate({scrollTop:$('.result').offset().top - 60}, '500');
      }
    }
    else{
      if(title.length == 0){
        $("#title").addClass("error");
      }
      if(topText.length == 0){
        $("#top_text").addClass("error");
      }
      if(author.length == 0){
        $("#author").addClass("error");
      }
    }
  });
  $("input").keyup(function(e){
    if(e.target.value.length > 0){
      $(this).removeClass("error")
    }
    if($(this).attr("id") == "title" && $(this).val().length > 40){
      $(this).val($(this).val().substring(0,41));
      e.preventDefault();
    }
    if($(this).attr("id") == "top_text" && $(this).val().length > 60){
      $(this).val($(this).val().substring(0,61));
      e.preventDefault();
    }
    if($(this).attr("id") == "author" && $(this).val().length > 25){
      $(this).val($(this).val().substring(0,26));
      e.preventDefault();
    }
    if($(this).attr("id") == "guide_text" && $(this).val().length > 25){
      $(this).val($(this).val().substring(0,26));
      e.preventDefault();
    }
    if($(this).attr("id") == "image_code" || $(this).attr("id") == "theme"){
      if(isNaN($(this).val())){
        $(this).val($(this).val().substring(0,$(this).val().length-1));
        e.preventDefault();
      }
      else if ($(this).attr("id") == "image_code" && $(this).val() > 40){
        $(this).val($(this).val().substring(0,$(this).val().length-1));
      }
      else if ($(this).attr("id") == "theme" && $(this).val() > 16){
        $(this).val($(this).val().substring(0,$(this).val().length-1));
      }
    }



    // if(e.value())
  })
</script>
